<template>
	<div class="meRoot">
		<title text="个人中心"></title>
		<div class="ctx">
			<div class="user_head"><img class="img" :src="user.isLogin ? user.data.head : img('head_offline.png')" alt="">
			</div>
			<div class="user_info" v-if="user.isLogin">
				<p class="info">用户名:{{ user.data.name }}</p>
				<p class="info">账号：{{ user.data.id }}</p>
				<p class="info">钱包余额: <span class="balance">¥{{ moneyFormat(balance) }}</span></p>
			</div>
			<div class="login_botton">
				<div class="hit" v-show="!user.isLogin">您还未登录</div>
				<div @click="logM()"><xxl-botton>{{ user.isLogin ? "退出登陆" : "现在登陆" }}</xxl-botton></div>
			</div>
		</div>
	</div>
</template>

<script>
import api from '../../api';

export default {
	name: 'Me',

	data() {
		return {
			balance: 0
		};
	},

	mounted() {

	},
	props: {
		inme: {
			default: false,
		}
	},
	watch: {
		inme(d) {
			if(d&&this.user.isLogin)
			api.userWallet().then((d) => {
				if (d.code == 200) {
					this.balance = d.data.balance
				}
			})
		},
		"user.isLogin"(d) {
			if (d) {
				api.userWallet().then((d) => {
					if (d.code == 200) {
						this.balance = d.data.balance
					}
				})
			}
		}
	},
	methods: {
		async logM() {
			if (this.user.isLogin) {
				let result = await api.userLogout()
				if (result.code == 200) {
					this.$store.commit('logout')
				}
			} else {
				uni.navigateTo({
					"url": "/pack_log/login/login",
					"animationType": "slide-in-top"
				})
			}
		}
	},

	components: {

	}
}
</script>

<style lang="scss" scoped>
.meRoot {
	height: 100%;
}

.ctx {
	height: calc(100% - $uni-nav);
}

.user_head {
	width: 60px;
	height: 60px;
	padding-top: 150px;

	.img {
		border-radius: 50%;
		width: 100%;
		height: 100%;
	}

	margin: auto;
}

.login_botton {
	.hit {
		margin-bottom: 40px;
	}

	width: 180px;
	padding-top: 50px;
	text-align: center;
	margin: auto;
}

.user_info {
	margin-top: 20px;
	text-align: center;

	.info {
		margin: 10px;
	}
}
.balance{
	color: orangered;
}
</style>